<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-navbar :placeholder="true">
			<view slot="left" @click="goBack">
				<view class="flex align-center justify-center padding-xs text-tea ">
					<text>切换门店</text>
					<text class="cuIcon-order margin-left-xs "></text>
				</view>
			</view>
		</u-navbar>
		<view @touchstart="touchStart" @touchend="touchEnd" >
			<view class="padding-sm bg-white">
				<view class="flex">
					<view style="width: 90%;" class="flex flex-direction">
						<text class="text-bold text-xl">{{storeDetalis.name}}</text>
						<text class="text-gray text-sm margin-top-xs">门店地址：重庆市</text>
					</view>
					<view style="width: 10%;" class="flex flex-direction">
						<view @click="callPhone(110)"
							style="width: 60rpx; height: 60rpx;border-radius: 60rpx;"
							class="flex align-center justify-center ">
							<text class="cuIcon-phone text-tea " style="font-size: 40rpx;"></text>
						</view>
						<view @click="gotoLoaction" style="width: 60rpx; height: 60rpx;border-radius: 60rpx;"
							class="flex align-center justify-center ">
							<text class="cuIcon-location text-tea " style="font-size: 40rpx;"></text>
						</view>
					</view>
				</view>
			</view>

			<view class="margin-tb margin-lr-sm">
				<u-swiper :autoplay="true" imgMode="aspectFill" :list="[storeDetalis.image]" indicator
					indicatorMode="line" circular height="450rpx"></u-swiper>
			</view>

			<view class="margin-tb-sm padding-sm bg-white">
				<view class="text-bold text-lg ">门店介绍</view>
				<view class="text-sm text-gray margin-top-sm" v-html="storeDetalis.desc"></view>
			</view>

			<view class="padding-sm margin-tb-sm ">
				<view class="centerBox">
					<view v-for="(item,index) in dtList" :key="index" @click="changeTime(item)" :style=""
						:class="[item.change?'bg-tea':'bg-white text-gray','radius','shadow-blur','flex','align-center','flex-direction','justify-center']">
						<view>{{item.week}}</view>
						<view>{{item.timeTxt}}</view>
					</view>
					<!-- <view class="bg-white radius shadow-blur flex align-center flex-direction justify-center text-gray"
						@click="showDate=true">
						<view>更多</view>
						<view>日期</view>
					</view> -->
				</view>
			</view>
			<!-- 房间列表 -->
			<view class="margin-top-sm margin-bottom-lg padding-lg bg-white">
				<view v-for="(item,index) in storeDetalis.private_room" :key="item.id">
					<u-line v-if="index!=0" dashed margin="30rpx 0 30rpx 0"></u-line>
					<view class="flex ">
						<image :src="item.image" style="width: 35%;height: 248rpx; " class="radius"></image>
						<view
							style="margin-left: 20rpx;width: 65%;display: flex;justify-content: space-between;align-items: center;">
							<view style="display: flex;flex-direction: column;justify-content: space-between;">
								<view>
									<span class="text-bold text-lg">{{item.name}}</span>
								</view>
								<view class="margin-top-sm">
									<span class="text-xs text-gray" v-for="it in item.room_time_price">
										前4小时(元)
									</span>
									<view class="text-xs text-gray">
										·会员：{{item.PriceLog.MinReservePriceMember?item.PriceLog.MinReservePriceMember:0}}
									</view>
									<view class="text-xs text-gray">
										·普通：{{item.PriceLog.MinReservePrice?item.PriceLog.MinReservePrice:0}}
									</view>
								</view>
								<view class="margin-top-sm">
									<span class="text-xs text-gray">
										续费(元/小时)
									</span>
									<view class="text-xs text-gray">
										·会员：{{item.PriceLog.OnlyHourPriceMember?item.PriceLog.OnlyHourPriceMember:0}}
									</view>
									<view class="text-xs text-gray">
										·普通：{{item.PriceLog.OnlyHourPrice?item.PriceLog.OnlyHourPrice:0}}
									</view>
								</view>

							</view>
							<view class="flex flex-direction justify-end" style="width: 160rpx;">
								<view @click="yuyue(item)" class="btn-yuyue">预约</view>
								<!--<view-->
								<!--	style="width: 100%; height: 40rpx;line-height: 40rpx;text-align: center;border-radius: 0 0 4rpx 4rpx;"-->
								<!--	class="text-sm"-->
								<!--	:class="item.State==0?'bg-tea-light ':item.State==1?'bg-gray text-tea':item.State==2?'bg-tea-light text-white':'bg-red text-white'">-->
								<!--	&lt;!&ndash;{{item.StateTitle}}123&ndash;&gt;-->
								<!--</view>-->

							</view>
						</view>

					</view>
					<!--<view class="flex justify-between align-end">-->
					<!--	<view class="flex justify-start align-start">-->
					<!--		<image :src="item.Images[0]" style="width: 200rpx;height: 200rpx; " class="radius"></image>-->
					<!--		<view class="flex flex-direction justify-between margin-left-sm" style="height: 200rpx;">-->
					<!--			<view>-->
					<!--				<view class="text-lg text-bold">{{item.Name}}</view>-->
					<!--				<view class="text-sm text-gray margin-top-xs">最小预定{{item.MinReserve}}小时</view>-->
					<!--			</view>-->
					<!--			<view>-->
					<!--				<view class="text-tea">-->
					<!--					会员：{{item.PriceLog.OnlyHourPriceMember?item.PriceLog.OnlyHourPriceMember:0}}/小时-->
					<!--				</view>-->
					<!--				<view class="text-sm text-gray" style="text-decoration: line-through;">-->
					<!--					普通：{{item.PriceLog.OnlyHourPrice?item.PriceLog.OnlyHourPrice:0}}/小时</view>-->
					<!--			</view>-->
					<!--		</view>-->
					<!--	</view>-->
					<!--	<view class="flex flex-direction justify-end">-->
					<!--		<view-->
					<!--			style="width: 100%; height: 40rpx;line-height: 40rpx;text-align: center;border-radius: 10rpx 10rpx 0 0;"-->
					<!--			class="text-sm"-->
					<!--			:class="item.State==0?'bg-tea text-white':item.State==1?'bg-gray text-tea':item.State==2?'bg-tea text-white':'bg-red text-white'">-->
					<!--			{{item.StateTitle}}-->
					<!--		</view>-->
					<!--		<button @click="yuyue(item)" class=" btn-yuyue">预约</button>-->
					<!--	</view>-->
					<!--</view>-->
				</view>
			</view>
		</view>


		<u-datetime-picker ref="datetimePicker" :formatter="formatter" @cancel="showDate=false"
			@confirm="dateTimeChange" :show="showDate" v-model="changDate" mode="date" :minDate="minDate">
		</u-datetime-picker>

		<!-- 选择预约信息相关 -->
		<u-popup :show="showYuYuePopup" :zIndex="ydBoxIndex" :closeOnClickOverlay="true" @close="showYuYuePopup=false">
			<view style="min-height: 85vh;">
				<view class="flex justify-between align-center margin-sm">
					<text class="text-grey" @click="showYuYuePopup=false">取消</text>
					<text class="text-def text-black">预约到店时间</text>
					<text class="text-tea" @click="submitOrder">确定</text>
				</view>
				<view class="margin-sm ">
					<view class="margin-top-lg">
						<view class="text-xl text-bold">{{changeTimeValue}}</view>
						<view class="text-gray text-xs">当前选择日期</view>
					</view>
					<view class="flex align-center justify-between margin-top-lg">
						<view class="flex flex-direction align-center">
							<text class="text-gray text-def margin-bottom-xs">开始时间</text>
							<view @click="showTimePickerStart=true;ydBoxIndex=0" class="border-tea"
								style="width: 150px;height: 40px;border-radius: 8px;line-height: 40px;text-align: center;">
								<text class="text-tea text-xl">{{timeChangeForm.startTimeStr}}</text>
							</view>
						</view>
						<view class="flex flex-direction  align-center">
							<text class="text-gray text-def margin-bottom-xs">结束时间</text>
							<view @click="showTimePickerEnd=true;ydBoxIndex=0" class="border-tea"
								style="width: 150px;height: 40px;border-radius: 8px;line-height: 40px;text-align: center;">
								<text class="text-tea text-xl">{{timeChangeForm.endTimeStr}}</text>
							</view>
						</view>
					</view>
					<view class="flex align-center justify-between margin-top-lg">
						<view>
							<text class="text-xs text-gray">下方仅为图示</text>
						</view>
						<view class="flex align-center   ">
							<view class="flex align-center margin-right-xs">
								<view class="bg-gray" style="width: 10px;height: 10px;"></view>
								<text>可选</text>
							</view>
							<view class="flex margin-right-sm align-center">
								<view class="bg-red " style="width: 10px;height: 10px;"></view>
								<text>不可选</text>
							</view>
							<view class="flex  align-center">
								<view class="bg-tea" style="width: 10px;height: 10px;"></view>
								<text>已选</text>
							</view>
						</view>
					</view>
					<view class="margin-xm margin-top-sm"
						style="display: grid;grid-template-columns: repeat(5,1fr);grid-row-gap: 1px;column-gap: 1px;">
						<view v-for="(item,index1) in TimeRangeInfo" :key="index1" v-if="item.index==0"
							style="width: auto;height: 20px;" class="flex align-center justify-center"
							:class="item.state==-1?'bg-red ':item.state==1?'bg-tea':'bg-gray'">
							<text :class="item.state==0?'text-black':'text-white'"
								class="text-sm ">{{item.timestr}}</text>
						</view>
					</view>
					<view class="margin-top-sm">次日</view>
					<view class="margin-xm margin-top-sm"
						style="display: grid;grid-template-columns: repeat(5,1fr);grid-row-gap: 1px;column-gap: 1px;">
						<view v-for="(item,index2) in TimeRangeInfo" :key="index2" v-if=" item.index==1"
							style="width: auto;height: 20px;" class="flex align-center justify-center"
							:class="item.state==-1?'bg-red':item.state==1?'bg-tea':'bg-gray'">
							<text :class="item.state==0?'text-black':'text-white'"
								class="text-sm ">{{item.timestr.replaceAll('次日','')}}</text>
						</view>
					</view>
				</view>
			</view>
			<view style="position: fixed;bottom: 0px;left: 0px;width: 100%;height: 120rpx; " class="bg-white">
				<view class="flex align-center justify-between margin-sm">
					<text class="text-lg text-bold" style="color: #F85B35;">共{{timeChangeForm.selectHours}}小时</text>
					<button class="cu-btn bg-blue" style="width: 100px;" @click="submitOrder">立即预定</button>
				</view>
			</view>
		</u-popup>
		<u-picker :immediateChange="true" @confirm="confirmTimePickerStart"
			@cancel="showTimePickerStart=false;ydBoxIndex=10075" :show="showTimePickerStart"
			:columns="columnsTimeStart"></u-picker>
		<u-picker :immediateChange="true" @confirm="confirmTimePickerEnd"
			@cancel="showTimePickerEnd=false;ydBoxIndex=10075" :show="showTimePickerEnd" :columns="columnsTimeEnd">
		</u-picker>

		<view v-if="showRightBox" class="left-box animated slideInLeft">
			<view @click="openMaxDoor" class="box-opendoor flex flex-direction align-center justify-center bg-tea">
				<text class="cuIcon-unlock text-white"></text>
				<text class="text-white text-xs">开大门</text>
			</view>
			<view @click="openDoor" class="box-opendoor flex flex-direction align-center justify-center bg-tea">
				<text class="cuIcon-unlock text-white"></text>
				<text class="text-white text-xs">开房门</text>
			</view>
			<view @click="renewOrder" class="box-opendoor flex flex-direction align-center justify-center bg-white">
				<text class="cuIcon-time text-blue"></text>
				<text class="text-blue text-xs ">续单</text>
			</view>
			<!-- <view @click="removeOrder" class="box-opendoor flex flex-direction align-center justify-center bg-white">
				<text class="cuIcon-footprint text-red "></text>
				<text class="text-red text-xs ">离店</text>
			</view> -->
		</view>

		<u-modal :closeOnClickOverlay="true" :show="showOpenDoorModal" title="选择门锁位置" :content="contentOpenDoor">
			<template slot="confirmButton">
				<view class="flex">
					<button class="flex-sub cu-btn bg-blue margin-left-xs" @click="changeOpenDoor(0)">大门</button>
					<button class="flex-sub cu-btn bg-blue margin-left-xs" @click="changeOpenDoor(-1)">二楼门</button>
				</view>
				<view class="flex margin-top-sm">
					<button class="flex-sub cu-btn  bg-tea  margin-left-xs" @click="changeOpenDoor(1)">室内门</button>
					<button class="flex-sub cu-btn bg-gray margin-left-xs" @click="showOpenDoorModal=false">取消</button>
				</view>
			</template>
		</u-modal>

	</view>
</template>
<script>
	import {
		deepClone
	} from '../../config/common.js'
	export default {
		data() {
			return {
				showDate: false, //展示日期选择
				changDate: Number(new Date()), //当前选择的日期
				dtList: [],
				storeId: '',
				storeDetalis: {
					store: {
						Images: [],
						Address: '',
					},
				},
				showYuYuePopup: false, //是否展示预约弹窗
				changeTimeValue: '', //当前预约时间
				minDate: '',
				maxDate: '',
				showTimePickerStart: false,
				showTimePickerEnd: false,
				yuYueTimeStart: '',
				yuYueTimeEnd: '',
				ydBoxIndex: 10075, //预定弹窗Index
				columnsTimeStart: [], //计算开始时间
				columnsTimeEnd: [],
				TimeRangeInfo: [],
				timeChangeForm: {
					NextDate: false,
					startTime: '',
					endTime: '',
					selectHours: 0
				},


				showRightBox: true,
				timdInterId: '',
				showOpenDoorModal: false,
				contentOpenDoor: '',
        id: ''
			}
		},
		onReady() {
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
    onLoad(e){
      this.id = e.id
    },
		onShow(params) {

			this.storeId = this.id;
			this.getStoreDetalis();
			if (!this.minDate) {
				let dt = new Date();
				this.minDate = Date.now();
				this.init(dt);
			}
		},

		watch: {
			'timeChangeForm.startTime': {
				handler(n, o) {
					let cha = parseInt(Date.parse(this.timeChangeForm.endTime) - Date.parse(this.timeChangeForm
							.startTime)) /
						1000 / 60;
					this.timeChangeForm.selectHours = parseFloat(cha / 60).toFixed(1);
				},
				deep: true
			},
			'timeChangeForm.endTime': {
				handler(n, o) {
					let cha = parseInt(Date.parse(this.timeChangeForm.endTime) - Date.parse(this.timeChangeForm
							.startTime)) /
						1000 / 60;
					this.timeChangeForm.selectHours = parseFloat(cha / 60).toFixed(1);
				},
				deep: true
			}
		},
		methods: {
			touchStart() {
				//开始时删除倒计时，并将box显示
				clearTimeout(this.timdInterId);
				this.showRightBox = false;
			},
			touchEnd() {
				this.timdInterId = setTimeout(() => {
					this.showRightBox = true;
				}, 500)
				//结束后开启一个时间倒计时，500毫秒后自动隐藏
			},
			//离店
			removeOrder() {
				let that = this;
				uni.showModal({
					title: '操作提示',
					content: '确认离店后订单将提前关闭，是否确认?',
					showCancel: true,
					success: function(e) {
						if (e.cancel) {
							return;
						}
						that.confirmRemoveOrder();
					}
				})
			},
			//确认离店
			confirmRemoveOrder() {
				uni.showLoading();
				uni.$u.http.post('/Customer/ConfirmRemoveOrder').then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				});
			},
			renewOrder() {
				uni.showLoading();
				//查询可续费的订单
				uni.$u.http.post('/Customer/GetOrderListCanRenew').then(res => {
					if (res.data.length <= 0) {
						uni.showToast({
							title: '无进行中的订单',
							icon: 'none'
						})
						return;
					}
					if (res.data.length == 1) {
						uni.navigateTo({
							url: '/pagesA/order/reneworder?orderId=' + res.data[0].Id
						})
						return;
					}
					uni.showToast({
						title: '当前存在多个订单，请点击订单详情后进入订单续费！',
						icon: 'none',
						duration: 2000,
					})
					setTimeout(() => {
						this.gotoOrderList()
					}, 2000)
				})
			},
			gotoOrderList() {
				uni.switchTab({
					url: '/pages/index/myorder',
				})
			},
			openMaxDoor() {
				uni.showLoading({
					title: '开锁中，请稍后'
				});
				uni.$u.http.post('/Customer/OpenMaxDoor').then(res => {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				});
			},
			openDoor() {
				uni.showLoading();
				//查询当前有几个订单，如果有一个订单则弹出对话框询问开大门还是开小门，如果有多个订单则跳转新的页面
				uni.$u.http.post('/Customer/GetOrderList', {
					storeId: '',
					state: '1,2',
					pageIndex: null,
				}).then(res => {
					if (res.data.length <= 0) {
						uni.showToast({
							title: '无进行中的订单',
							icon: 'none'
						})
						return;
					}
					if (res.data.length == 1) {
						this.contentOpenDoor = '当前订单：' + res.data[0].StoreInfo.StoreName + ' 房间：' + res.data[0]
							.RoomName;
						this.showOpenDoorModal = true;
						this.changeOrder = res.data[0];
						return;
					}
					uni.setStorage({
						key: 'OrderList',
						data: res.data
					});
					uni.navigateTo({
						url: '/pagesA/order/opendoor'
					})
				})
			},
			changeOpenDoor(e) {
				//e 0开大门  1开室内门
				this.showOpenDoorModal = false;
				uni.showLoading({
					title: '开锁中，请稍后'
				});
				uni.$u.http.post('/Customer/OpenDoor', {
					orderId: this.changeOrder.Id,
					index: e
				}).then(res => {
					//完成后再次查询门锁状态，
					this.$refs.uToast.show({
						message: res.msg
					})
				});
			},

			gotoLoaction() {
				let lat = this.storeDetalis.store.Lat;
				let lon = this.storeDetalis.store.Long;
				uni.openLocation({
					latitude: parseFloat(lat),
					longitude: parseFloat(lon),
					fail: function(err) {
						uni.showToast({
							icon: 'error',
							title: '导航失败'
						})
					}
				})
			},
			callPhone(phone) {
				//#ifdef MP-WEIXIN
				uni.makePhoneCall({
					phoneNumber: phone
				});
				//#endif
				//#ifdef APP-PLUS
				plus.device.dial(phone, true);
				//#endif
			},
			//开始时间选择完成
			confirmTimePickerStart(e) {
				let houre = e.value[0].replaceAll('时', '');
				let minute = e.value[1].replaceAll('分', '');
				this.showTimePickerStart = false;
				this.ydBoxIndex = 10075;

				let _year = uni.$u.timeFormat(this.timeChangeForm.startTime, 'yyyy');
				let _month = uni.$u.timeFormat(this.timeChangeForm.startTime, 'mm');
				let _day = uni.$u.timeFormat(this.timeChangeForm.startTime, 'dd')

				// let day = new Date(uni.$u.timeFormat(this.timeChangeForm.startTime, 'yyyy-mm-dd') + ' ' + houre + ':' +
				// 	minute + ':00');

				let day = new Date(_year, _month - 1, _day, houre, minute, 0);

				this.timeChangeForm.startTime = day;
				this.timeChangeForm.startTimeStr = uni.$u.timeFormat(this.timeChangeForm.startTime,
					'hh:MM');

				//刷新预约结束时间
				const nextHours = parseInt(houre) + parseInt(this.timeChangeForm.Hours);
				let stime = deepClone(this.timeChangeForm.startTime);
				let _stime = stime.setHours(nextHours);
				let _s_year = uni.$u.timeFormat(_stime, 'yyyy');
				let _s_month = uni.$u.timeFormat(_stime, 'mm');
				let _s_day = uni.$u.timeFormat(_stime, 'dd');
				let _s_houre = uni.$u.timeFormat(_stime, 'hh');
				let _s_minu = uni.$u.timeFormat(_stime, 'MM');

				this.timeChangeForm.endTime = new Date(_s_year, _s_month - 1, _s_day, _s_houre, _s_minu, 0);

				this.timeChangeForm.NextDate = (this.timeChangeForm.endTime.getDate() != this.timeChangeForm.startTime
					.getDate());
				this.timeChangeForm.endTimeStr = (this.timeChangeForm.NextDate ? '次日' : '') + uni.$u.timeFormat(this
					.timeChangeForm.endTime,
					'hh:MM');

				//刷新试图
				this.refreshView();
			},
			//结束日期选择完成
			confirmTimePickerEnd(e) {
				this.timeChangeForm.NextDate = false;
				this.timeChangeForm.endTime = this.timeChangeForm.startTime;
				if (e.value[0].indexOf('次日') != -1) {
					let etime = deepClone(this.timeChangeForm.startTime);

					let eetime = etime.setDate(etime.getDate() + 1);
					let _s_year = uni.$u.timeFormat(eetime, 'yyyy');
					let _s_month = uni.$u.timeFormat(eetime, 'mm');
					let _s_day = uni.$u.timeFormat(eetime, 'dd');
					let _s_houre = uni.$u.timeFormat(eetime, 'hh');
					let _s_minu = uni.$u.timeFormat(eetime, 'MM');

					this.timeChangeForm.endTime = new Date(_s_year, _s_month - 1, _s_day, _s_houre, _s_minu, 0);
					this.timeChangeForm.NextDate = true;
				}
				let houre = e.value[0].replaceAll('次日', '').replaceAll('时', '');
				let minute = e.value[1].replaceAll('分', '');
				this.showTimePickerEnd = false;
				this.ydBoxIndex = 10075;

				let _year = uni.$u.timeFormat(this.timeChangeForm.endTime, 'yyyy');
				let _month = uni.$u.timeFormat(this.timeChangeForm.endTime, 'mm');
				let _day = uni.$u.timeFormat(this.timeChangeForm.endTime, 'dd');

				let day = new Date(_year, _month - 1, _day, houre, minute, 0);

				if (day < this.timeChangeForm.startTime) {
					uni.showToast({
						title: '结束时间不能早于开始时间！',
						icon: 'none',
					})
					return;
				}
				let cha = parseInt(Date.parse(day) - Date.parse(this.timeChangeForm.startTime)) /
					1000 / 60 / 60;
				this.timeChangeForm.selectHours = parseFloat(cha / 60).toFixed(1);
				if (cha < this.timeChangeForm.Hours) {
					uni.showToast({
						title: '最少预约' + this.timeChangeForm.Hours + '小时！',
						icon: 'none',
					})
					return;
				}
				this.timeChangeForm.endTime = day;
				this.timeChangeForm.endTimeStr = (this.timeChangeForm.NextDate ? '次日' : '') + uni.$u.timeFormat(this
					.timeChangeForm.endTime,
					'hh:MM');

				//刷新试图
				this.refreshView();
			},
			refreshView() {
				let BeginTime = Date.parse(this.timeChangeForm.startTime);
				let EndTime = Date.parse(this.timeChangeForm.endTime);

				this.TimeRangeInfo.forEach((x) => {
					let startTime = x.startTime.substr(6, 13); //开始时间
					let endTime = x.endTime.substr(6, 13); //结束时间
					if (x.state == -1) {
						return;
					}
					x.state = 0;
					//如果开始时间大于等于x.开始时间且开始时间小于x.结束时间
					if (BeginTime >= startTime && BeginTime < endTime) {
						x.state = 1;
					}
					//如果结束时间大于x.开始时间且结束时间小于等于x.结束时间
					if (EndTime > startTime && EndTime <= endTime) {
						x.state = 1;
					}
					//如果开始时间小于x.开始时间且结束时间大于等于x.结束时间
					if (BeginTime < startTime && EndTime >= endTime) {
						x.state = 1;
					}
				});
			},
			//预约茶室
			yuyue(item) {
        console.log('item1', item)
				this.changeRoomId = item.id; //当前选择的房间Id
				this.changeRoomName = item.name;
        uni.navigateTo({
          url:'/pages/index/order?id=' + item.id + '&name=' + item.name
        })
        return
				this.changeRoomImage = item.image;
				uni.showLoading({
					title: '查询房间信息中'
				});
				uni.$u.http.post('/Customer/CheckRoomTimeSlot', {
					roomId: item.Id,
					dtChange: this.changeTimeValue
				}).then(res => {
					if (res.data.BeginTime) {
						this.showYuYuePopup = true;
						this.columnsTimeStart = [];
						this.columnsTimeEnd = [];
						this.columnsTimeStart.push(res.data.BeginHours);
						this.columnsTimeStart.push(res.data.BeginMinutes);
						this.columnsTimeEnd.push(res.data.EndHours);
						this.columnsTimeEnd.push(res.data.EndMinutes);
						this.TimeRangeInfo = res.data.TimeRangeInfo;

						let _b_year = uni.$u.timeFormat(res.data.BeginTime, 'yyyy');
						let _b_month = uni.$u.timeFormat(res.data.BeginTime, 'mm');
						let _b_day = uni.$u.timeFormat(res.data.BeginTime, 'dd');
						let _b_houre = uni.$u.timeFormat(res.data.BeginTime, 'hh');
						let _b_minu = uni.$u.timeFormat(res.data.BeginTime, 'MM');

						let _e_year = uni.$u.timeFormat(res.data.EndTime, 'yyyy');
						let _e_month = uni.$u.timeFormat(res.data.EndTime, 'mm');
						let _e_day = uni.$u.timeFormat(res.data.EndTime, 'dd');
						let _e_houre = uni.$u.timeFormat(res.data.EndTime, 'hh');
						let _e_minu = uni.$u.timeFormat(res.data.EndTime, 'MM');


						//建议开始时间和结束时间
						this.timeChangeForm.startTime = new Date(_b_year, _b_month - 1, _b_day, _b_houre, _b_minu,
							0); //new Date(res.data.BeginTime);
						this.timeChangeForm.endTime = new Date(_e_year, _e_month - 1, _e_day, _e_houre, _e_minu,
							0); //new Date(res.data.EndTime);
						this.timeChangeForm.startTimeStr = uni.$u.timeFormat(this.timeChangeForm.startTime,
							'hh:MM');
						this.timeChangeForm.endTimeStr = uni.$u.timeFormat(this.timeChangeForm.endTime,
							'hh:MM');
						this.timeChangeForm.Hours = res.data.Hours; //最小选择小时
						this.timeChangeForm.NextDate = this.timeChangeForm.startTime.getDate() != this
							.timeChangeForm.endTime.getDate();
						this.refreshView();
					} else {
						this.$refs.uToast.show({
							message: '当日无推荐时间段！',
							type: 'error',
							position: 'top'
						});
					}
				});
				this.yuYueTimeStart = ''; //获取本房间本时间段可预约的开始时间和结束时间
			},
			//立即预约
			submitOrder() {
				//先访问接口判断选择的时候有无冲突
				//传门店Id,房间Id,开始时间，结束时间
				const startTime = uni.$u.timeFormat(this.timeChangeForm.startTime, 'yyyy-mm-dd hh:MM') + ':00'
				const endTime = uni.$u.timeFormat(this.timeChangeForm.endTime, 'yyyy-mm-dd hh:MM') + ':00'
				let params = 'storeId=' + this.storeId + '&roomId=' + this.changeRoomId + '&startTime=' + startTime +
					'&endTime=' + endTime +
					'&allhoure=' + this.timeChangeForm.selectHours + '&roomImage=' + this.changeRoomImage +
					// + this.storeDetalis.store.Images[0] +
					'&storeName=' +
					this.storeDetalis.store.StoreName + '&roomName=' + this.changeRoomName;
				uni.navigateTo({
					url: '/pagesA/store/orderconfirm?' + params
				})
			},
			//获取门店详情
			getStoreDetalis() {
				uni.$u.http.post('/getRoomDetail', {
					id: this.storeId
				}).then(res => {
					this.storeDetalis = res.data;
					//uni.setStorageSync('WeiXinGroupCode', this.storeDetalis.store.WeiXinGroupCode);
				});
			},
			init(dt) {
				this.changeTimeValue = dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate();
				let weekname = ['日', '一', '二', '三', '四', '五', '六'];
				this.dtList = new Array();
				for (var a = 0; a < 6; a++) {
					this.dtList.push({
						week: '周' + weekname[dt.getDay()],
						timeTxt: (dt.getMonth() + 1) + '-' + dt.getDate(),
						change: a == 0,
						year: dt.getFullYear(),
					});
					dt = dt.setDate(dt.getDate() + 1);
					dt = new Date(dt);
				}
			},
			dateTimeChange(val) {
				this.init(new Date(val.value));
				this.showDate = false;
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			changeTime(item) {
				this.dtList.forEach((x) => {
					x.change = x == item
				});

				let dty = this.dtList.filter((x) => {
					return x.change == true
				})[0];
				this.changeTimeValue = dty.year + '-' + dty.timeTxt;
			},
			goBack() {
				uni.redirectTo({
					url: '/pages/index/index'
				});
			},
			//深拷贝

		}
	}
</script>

<style scoped>
	.box-qd {
		font-size: 12px;
		margin-top: 5px;
		background-color: #CCAC82;
		color: #fff;
		text-align: center;
		height: 25px;
		border-radius: 5px;
		line-height: 25px;
		width: 80px;
		text-align: center;
	}

	.centerBox {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		grid-column-gap: 5px;
		height: 60px;
	}

	.btn-yuyue {
		height: 30px;
		font-size: 14px;
		background-color: #CCAC82;
		color: #fff;
		border: 0px;
		border-radius: 4rpx 4rpx 0 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.left-box {
		position: fixed;
		z-index: 1;
		bottom: 336rpx;
		height: 360rpx;
		left: 32rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.box-opendoor {
		width: 96rpx;
		height: 96rpx;
		border-radius: 96rpx;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, .12), 0 0 12rpx rgba(0, 0, 0, .04)
	}
</style>
